<template>
  <div class="personal-center">
    <el-card class="box-card">
      <div slot="header" class="card-title clearfix">
        <span>欢迎你 {{userInfoForm.username}} </span>
      </div>

      <el-form :model="userInfoForm" status-icon ref="userInfoForm" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            placeholder="请填写用户名"
            v-model="userInfoForm.username"
            autocomplete="off"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="用户权限" prop="authority">
          <el-input
            type="text"
            v-model="userInfoForm.authority"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-input
            type="text"
            v-model="userInfoForm.gender"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="userInfoForm.birthday"
            type="date"
            placeholder="请选择出生日期"
            :disabled="true">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          prop="email"
          label="邮箱"
        >
          <el-input
            placeholder="请填写正确的邮箱地址"
            v-model="userInfoForm.email"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="手机号码" prop="phone">
          <el-input
            type="text"
            placeholder="请填写11位手机号"
            v-model="userInfoForm.phone"
            autocomplete="off"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="个人地址" prop="address">
          <el-input
            type="text"
            placeholder="请填写收货地址"
            v-model="userInfoForm.address"
            autocomplete="off"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="持有托马斯币" prop="score">

          <el-input
            type="text"
            placeholder="请填写持有托马斯币"
            v-model="userInfoForm.score"
            autocomplete="off"
            :disabled="true">
          </el-input>
        </el-form-item>

      </el-form>

      <div class="card-button">
        <el-button type="warning" @click="$router.push('/')">返回首页</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "PersonalCenter",
  created() {
    let userInfo = this.$store.getters.getUser;
    if (this.userInfo === null) {
      this.$message({
        message: '请先登录！',
        type: 'warning'
      });
      this.$router.push("/login");
      return;
    }
    this.userInfoForm = {
      username: userInfo.username,
      authority: userInfo.authority,
      gender: userInfo.gender,
      birthday: userInfo.birthday,
      email: userInfo.email,
      phone: userInfo.phone,
      address: userInfo.address,
      score: userInfo.score
    }
  },
  data() {
    return {
      userInfoForm: {
      },
    }
  }
}
</script>

<style scoped>
.personal-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.card-title {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.card-button {
  display: flex;
  justify-content: center;
}

</style>